<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图表统计</title>
  <link rel="stylesheet" href="/static/assets/lib/bootstrap.css" />
  <link rel="stylesheet" href="/static/assets/lib/main.css" />
  <script src="/static/assets/lib/jquery.js"></script>
  <script type="text/javascript" src="/static/assets/lib/echarts.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row spannel_list">
      <div class="col-sm-3 col-xs-6">
        <div class="spannel">
          <em id="orderTotal">26456</em><span>个</span>
          <b>订单总数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor01">
          <em id="productTotal">372</em><span>个</span>
          <b>商品总数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor02">
          <em id="userTotal">5618</em><span>人</span>
          <b>用户总数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor03">
          <em id="evaluateTotal">216</em><span>个</span>
          <b>评论总数</b>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row curve-pie">
      <div class="col-lg-8 col-md-8">
        <div class="gragh_pannel" id="curve_show"></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="gragh_pannel" id="pie_show"></div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="column_pannel" id="column_show"></div>
  </div>

  <div class="container-fluid">
    <div class="column_pannel" id="curve_show1"></div>
  </div>


  <script>
    $.post(
            '/echarts/selectCount',
            function (result) {
              if (result.code == 0) {
                $('#orderTotal').text(result.data.orderTotal);
                $('#userTotal').text(result.data.userTotal);
                $('#productTotal').text(result.data.productTotal);
                $('#evaluateTotal').text(result.data.evaluateTotal);
              }
            },
            'json'
    );
    $.post(
            '/echarts/selectTotalOrder',
            function (result) {
              console.log(result.data);
              var oChart = echarts.init(document.getElementById('curve_show'));
              var aList_all = [];
              result.data.forEach(function(item) {
                var newItem = {
                  'count': item.count,
                  'date': item.orderDate
                };
                aList_all.push(newItem);
              });

              let aCount = [];
              let aDate = [];

              for (var i = 0; i < aList_all.length; i++) {
                aCount.push(aList_all[i].count);
                aDate.push(aList_all[i].date);
              }

              var chartopt = {
                title: {
                  text: '日新增订单数',
                  left: 'center',
                  top: '10'
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['新增订单'],
                  top: '40'
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                calculable: true,
                xAxis: [
                  {
                    name: '日',
                    type: 'category',
                    boundaryGap: false,
                    data: aDate
                  }
                ],
                yAxis: [
                  {
                    name: '日新增订单数',
                    type: 'value'
                  }
                ],
                series: [
                  {
                    name: '新增订单',
                    type: 'line',
                    smooth: true,
                    itemStyle: { normal: { areaStyle: { type: 'default' }, color: '#f80' }, lineStyle: { color: '#f80' } },
                    data: aCount
                  }],
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255,136,0,0.39)'
                    }, {
                      offset: .34,
                      color: 'rgba(255,180,0,0.25)'
                    }, {
                      offset: 1,
                      color: 'rgba(255,222,0,0.00)'
                    }])

                  }
                },
                grid: {
                  show: true,
                  x: 50,
                  x2: 50,
                  y: 80,
                  height: 220
                }
              };

              oChart.setOption(chartopt);
            },
            'json'
    );


    $.post(
            '/echarts/selectBrandCount',
            function (jsonObj) {
              console.log(jsonObj);

              var xArray = new Array();
              var yArray = new Array();
              for (var BrandCountVO of jsonObj.data) {
                xArray.push(BrandCountVO.name);
                yArray.push(BrandCountVO.value);
              }
              var oPie = echarts.init(document.getElementById('pie_show'));
              var oPieopt =
                      {
                        title: {
                          top: 10,
                          text: '各分类商品数量比',
                          x: 'center'
                        },
                        tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        color: [
                          '#5885e8', '#13cfd5', '#00ce68', '#ff9565','#FF0000', '#00FF00', '#FFFF00',
                          '#FF00FF', '#00FFFF', '#FF8000',
                          '#00FF80', '#FF0080', '#0080FF'
                        ],
                        legend: {
                          x: 'center',
                          top: 65,
                          data: xArray
                        },
                        // legend: {
                        //   orient: 'vertical', // 图例垂直布局
                        //   left: 'left' // 图例左对齐
                        // },
                        toolbox: {
                          show: true,
                          x: 'center',
                          top: 35,
                          feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                              show: true,
                              type: ['pie', 'funnel'],
                              option: {
                                funnel: {
                                  x: '25%',
                                  width: '50%',
                                  funnelAlign: 'left',
                                  max: 1548
                                }
                              }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                          }
                        },
                        calculable: true,
                        series: [
                          {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['45%', '60%'],
                            center: ['50%', '68%'],
                            data: jsonObj.data
                          }
                        ]
                      };
              oPie.setOption(oPieopt);

            },
            'json'
    );



    $.post(
            '/echarts/productSales',
            function (jsonObj) {
              console.log(jsonObj);

              var xArray = new Array();
              var yArray = new Array();
              for (var OrderBrandCountVo of jsonObj.data) {
                xArray.push(OrderBrandCountVo.name);
                yArray.push(OrderBrandCountVo.value);
              }

              var oColumn = echarts.init(document.getElementById('column_show'));
              var oColumnopt =
                      {
                        title: {
                          text: '畅销商品排行榜TOP20',
                          x: 'center'
                        },
                        tooltip: {
                          trigger: 'item'
                        },
                        xAxis: {
                          data: xArray
                        },
                        yAxis: {},
                        series: [
                          {
                            name: '销量',
                            type: 'bar',
                            data: yArray,
                            itemStyle: {
                              normal: {
                                color: function(params) {
                                  var colorList = [
                                    '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
                                    '#FF00FF', '#00FFFF', '#FF8000', '#8000FF',
                                    '#00FF80', '#FF0080', '#80FF00', '#0080FF',
                                    '#FFC0C0', '#C0FFC0', '#C0C0FF', '#FFFF80',
                                    '#FF80FF', '#80FFFF', '#FFA500', '#A500FF',
                                    '#00FFA5', '#FF00A5', '#A5FF00', '#00A5FF',
                                    '#FFD700', '#D700FF', '#00FFD7', '#FF00D7',
                                    '#D7FF00', '#00D7FF', '#FF7F50', '#7F50FF',
                                    '#50FF7F', '#FF507F', '#7FFF00', '#007FFF',
                                    '#FF4500', '#4500FF', '#00FF45', '#FF0045',
                                    '#45FF00', '#0045FF', '#FF1493', '#1493FF',
                                    '#00FF14', '#FF0014', '#14FF00', '#0014FF',
                                    '#FF69B4', '#69B4FF', '#B4FF69', '#FFB469',
                                    '#69FFB4', '#B469FF'
                                  ];
                                  return colorList[params.dataIndex % colorList.length];
                                }
                              }
                            }
                          }
                        ]
                      };
              oColumn.setOption(oColumnopt);
            },
            'json'
    );
    $.post(
            '/echarts/TotalSalesByDay',
            function (result) {
              console.log(result.data);
              var oChart = echarts.init(document.getElementById('curve_show1'));
              var aList_all = [];
              result.data.forEach(function(item) {
                var newItem = {
                  'count': item.totalSales,
                  'date': item.date
                };
                aList_all.push(newItem);
              });

              let aCount = [];
              let aDate = [];

              for (var i = 0; i < aList_all.length; i++) {
                aCount.push(aList_all[i].count);
                aDate.push(aList_all[i].date);
              }

              var chartopt = {
                title: {
                  text: '每日销售额统计',
                  left: 'center',
                  top: '10'
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['每日销售额'],
                  top: '40'
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                calculable: true,
                xAxis: [
                  {
                    name: '日',
                    type: 'category',
                    boundaryGap: false,
                    data: aDate
                  }
                ],
                yAxis: [
                  {
                    name: '每日销售额',
                    type: 'value'
                  }
                ],
                series: [
                  {
                    name: '销售额',
                    type: 'line',
                    smooth: true,
                    itemStyle: { normal: { areaStyle: { type: 'default' }, color: '#f80' }, lineStyle: { color: '#f80' } },
                    data: aCount
                  }],
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255,136,0,0.39)'
                    }, {
                      offset: .34,
                      color: 'rgba(255,180,0,0.25)'
                    }, {
                      offset: 1,
                      color: 'rgba(255,222,0,0.00)'
                    }])

                  }
                },
                grid: {
                  show: true,
                  x: 50,
                  x2: 50,
                  y: 80,
                  height: 220
                }
              };

              oChart.setOption(chartopt);
            },
            'json'
    );

  </script>
</body>

</html>